<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="icon.css" />
    <link rel="stylesheet" href="site.css" />
  </head>
  <body>
    <div class="page">
      <header class="top">
        <div class="top-title">排行榜</div>
        <nav class="tabs">
          <ul>
            <li class="tab-item tab-active"><img src="img/icon_article.webp" width="20" height="20">&nbsp; 好文精选</li>
            <li class="tab-item"><img src="img/icon_hot.webp" width="20" height="20">&nbsp; 热门资讯</li>
          </ul>
        </nav>
        <nav class="cats">
          <ul class="cat-list">
            <li class="cat-item cat-active">文章</li>
          </ul>
        </nav>
      </header> 
      <main class="list">
        <a href="#" class="tiezi">
          <div class="content">
            <div class="cover">
              <img src="img/耳机.jpg" class="cover-img" />
              <img src="img/rank-top1.png" class="cover-rank" />
            </div>
          </div>
          <div class="comment">性价比超高的一个耳机</div>
          <div class="desc">
            <div class="source">
              <img src="img/icon_topic.png" class="note" width="25" height="25">
              <span>电子产品</span>
            </div>
            <div class="something">
              <i class="iconfont icon-comment"></i>
              <span class="desc-number">300</span>
              <i class="iconfont icon-thumb"></i>
              <span class="desc-number">345</span>
            </div>
          </div>
        </a>
        <!--板块二-->
        <a href="#" class="tiezi">
          <div class="content">
            <div class="cover">
              <img src="img/网球.jpg" class="cover-img" />
              <img src="img/rank-top2.png" class="cover-rank" />
            </div>
          </div>
          <div class="comment">
            网球运动的好处有哪些？
          </div>
          <div class="desc">
            <div class="source">
              <img src="img/icon_topic.png" class="note" width="25" height="25">
              <span>运动</span>
            </div>
            <div class="something">
              <i class="iconfont icon-comment"></i>
              <span class="desc-number">200</span>
              <i class="iconfont icon-thumb"></i>
              <span class="desc-number">345</span>
            </div>
          </div> </a>
        <!--板块三-->
        <a href="#" class="tiezi">
          <div class="content">
            <div class="cover">
              <img src="img/AI.jpg" class="cover-img" />
              <img src="img/rank-top3.png" class="cover-rank" />
            </div>
          </div>
          <div class="comment">好用的AI推荐</div>
          <div class="desc">
            <div class="source">
              <img src="img/icon_topic.png" class="note" width="25" height="25">
              <span>AI推荐</span>
            </div>
            <div class="something">
              <i class="iconfont icon-comment"></i>
              <span class="desc-number">151</span>
              <i class="iconfont icon-thumb"></i>
              <span class="desc-number">345</span>
            </div>
          </div>
        </a>
      </main>
    </div>
  </body>
</html>
